/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import { Table, Button, Icon } from '@alifd/next';
import { ApiOfCollectTest } from '#/utils/coreApiDefine'
import styles from './styles/styles';

const groupAttr = {
  id: 'ID',
  name: '名称',
  code: '编码',
  protocol: '协议',
  // executionCycle: '周期（秒）',
}

export default class CollectTest extends Component {
  static displayName = 'CollectTest';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      group: [],
      metrics: this.props.group.metrics,
      testLoading: false,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      group: Object.entries(nextProps.group).filter(entry=>groupAttr.hasOwnProperty(entry[0])).map(entry=>{return {name: entry[0], value: entry[1]};}),
      metrics: nextProps.group.metrics
    })    
  }

  onCollectTest() {
    this.setState({
      testLoading: true
    })
    ApiOfCollectTest(this.props.deviceCode).then(response => {
      if(response.data.resourceBean.length > 0) {
        const metrics = response.data.resourceBean[0].metrics;
        this.setState({
          metrics,
          testLoading: false
        })
      }
    }).catch(error => {
      this.setState({
        testLoading: false
      })
    })
  }

  renderAttrLabel(value, index, item) {
    return (
      <span>{ groupAttr[item.name] }</span>
    )
  }

  renderAttrValue(value, index, item) {
    let block = <span>{item.value}</span>;
    return block;
  }

  render() {

    const renderHeader = () => {
      const merged = new Set(this.state.metrics.map(m=>m.command)).size;
      return (
        <h5 style={styles.infoColumnTitle}>
          采集指标
          <Button onClick={() => this.onCollectTest()} 
            type="primary" disabled={this.state.metrics.length == 0}  
            aria-label="prompt button" 
            warning 
            size="small" 
            style={{'marginLeft': '10px'}}>
            测试
          </Button>
          <span style={{'marginLeft': '10px'}}>（共 <span style={{'color': '#4ca74f'}}>{this.state.metrics.length}</span> 个指标，优化后 <span style={{'color': '#4ca74f'}}>{merged}</span> 次采集）</span>
        </h5>
      )
    }
    return (
      <div>
        <div style={styles.infoColumn}>
          <h5 style={styles.infoColumnTitle}>组信息</h5>
          <Table dataSource={this.state.group} hasHeader={false} hasBorder={false}>
            <Table.Column width={110} cell={ this.renderAttrLabel }/>
            <Table.Column cell={ this.renderAttrValue } />
          </Table>
        </div>

        <div style={styles.infoColumn}>
          {renderHeader()}
          <Table dataSource={this.state.metrics} loading={this.state.testLoading}>
            <Table.Column width={100} title="指令" dataIndex="command"/>
            <Table.Column width={100} title="名称" dataIndex="name" />
            <Table.Column width={100} title="标识符" dataIndex="variable"/>
            <Table.Column title="采集值" dataIndex="value"/>
            <Table.Column title="原始值" dataIndex="originalValue"/>
          </Table>
        </div>
      </div>
    );
  }
}